<template>
  <view class="container">
    <!-- Logo 和标题 -->
    <view class="logo-content">
      <view class="logo-title">
        <image class="logo-image" src="@/static/1.jpg" mode="widthFix"></image>
        <text class="title">毛孩乐园欢迎您</text>
      </view>

      <!-- 新增的地图元素 -->
      <view class="map-icon" @click="toMap">
        <image src="@/static/map.png" class="map-image"></image>
        <text class="map-text">地图</text>
      </view>
    </view>

    <!-- 居中的搜索栏 -->
    <view class="search-bar">
      <input class="search-input" type="text" placeholder="请输入搜索内容" v-model="searchQuery" @input="filterGoods">
    <uni-icons type="search" size="30"></uni-icons>

      
	  <uni-icons type="settings" size="30"@click="showSortOptions"></uni-icons>

    </view>

    <!-- 排序选项弹窗 -->
    <view v-if="showSortPopup" class="sort-popup">
      <view class="sort-option" @click="sortGoodsBy('default')">默认顺序显示</view>
      <view class="sort-option" @click="sortGoodsBy('sales')">按销量显示</view>
      <view class="sort-option" @click="sortGoodsBy('price')">按价格显示</view>
    </view>

    <!-- 商品信息列表 -->
    <view class="goods-container">
      <view v-for="goods in sortedGoodsList" :key="goods.goodsId" class="goods-info" @click="goToGoodsDetails(goods.goodsId)">
        <image class="goods-image" :src="goods.images"></image>
        <view class="goods-details">
          <text class="goods-name">{{ goods.goodsName }}</text>
          <text class="goods-description">{{ goods.description }}</text>
          <view class="goods-bottom">
            <text class="goods-price">¥ {{ goods.price }}</text>
            <text class="goods-sales">已售 {{ goods.sales }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import config from '@/config'; //引入config来设置全局的东西
export default {
  data() {
    return {
      goodsList: [], // 存储从后端获取的商品数据
      searchQuery: '', // 搜索框输入的查询字符串
      showSortPopup: false, // 控制排序弹窗显示/隐藏
      sortKey: 'default' // 默认排序键为默认顺序
    };
  },
  mounted() {
    // 在组件挂载后获取后端数据
    this.fetchGoodsData();
  },
  methods: {
    fetchGoodsData() {
      // 使用 uni.request 获取后端数据
      uni.request({
        url: config.apiUrl + '/goods/getall',
        method: 'GET',
        success: (response) => {
          console.log(response.data); // 输出返回的数据
          this.goodsList = response.data; // 将后端返回的商品数据存储到 goodsList 中
        },
        fail: (error) => {
          console.error('Error fetching goods data:', error);
        }
      });
    },
    toMap() {
      uni.navigateTo({
        url: '/pages/message/index'
      });
    },
    goToGoodsDetails(goodsId) {
      uni.navigateTo({
        url: `/pages/goodsDetail/goodsDetail?goodsId=${goodsId}`
      });
    },
    filterGoods() {
      // 该方法在输入事件时调用，无需特别处理，因为计算属性 filteredGoodsList 会自动更新
    },
    showSortOptions() {
      this.showSortPopup = !this.showSortPopup; // 切换弹窗显示/隐藏
    },
    sortGoodsBy(key) {
      this.sortKey = key; // 更新排序键
      this.showSortPopup = false; // 关闭弹窗
    }
  },
  computed: {
    filteredGoodsList() {
      // 根据 searchQuery 进行模糊搜索
      return this.goodsList.filter(goods => {
        const query = this.searchQuery.toLowerCase();
        return goods.goodsName.toLowerCase().includes(query) ||
          goods.description.toLowerCase().includes(query);
      });
    },
    sortedGoodsList() {
      // 根据排序键对过滤后的商品列表进行排序
      return this.filteredGoodsList.sort((a, b) => {
        if (this.sortKey === 'sales') {
          return parseInt(b.sales) - parseInt(a.sales); // 按销量从高到低排序
        } else if (this.sortKey === 'price') {
          return parseFloat(a.price) - parseFloat(b.price); // 按价格从低到高排序
        }
        return this.goodsList.indexOf(a) - this.goodsList.indexOf(b); // 默认顺序
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 10px;
  background-color: #ffefba;
  border-bottom: 1px solid #ccc;
}

.logo-content {
  display: flex;
  justify-content: space-between; /* 水平分散对齐 */
  align-items: center; /* 垂直居中 */
}

.logo-title {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.title {
  font-size: 38rpx;
  margin-left: 20rpx;
}

.map-icon {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.map-text {
  font-size: 32rpx;
  margin-left: 10rpx;
}

.logo-image {
  width: 100rpx;
  height: 100rpx;
}

.map-image {
  width: 40rpx;
  height: 40rpx;
}

.search-bar {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-input {
  padding: 8px;
  font-size: 16px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 18px;
  margin-right: 8px;
  width: 250px;
}

.search-button {
  height: 30px;
  font-size: 10px;
  background-color: #4CAF50; /* 绿色背景 */
  color: white;
  border: none;
  border-radius: 18px;
  cursor: pointer;
}

.sort-button {
  height: 40px;
  margin-left: 10px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 18px;
  cursor: pointer;
}

.sort-popup {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 300px;
}

.sort-option {
  padding: 15px;
  text-align: center;
  cursor: pointer;
}

.sort-option:hover {
  background-color: #f0f0f0;
}

.goods-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.goods-info {
  display: flex;
  flex-direction: column;
  width: calc(50% - 10px); /* 每行两个商品，每个商品占据一半宽度，减去间距 */
  background-color: aliceblue;
  border-radius: 18px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.goods-image {
  width: 100%;
  height: 120px;
  object-fit: cover; /* 保持图片的比例 */
}

.goods-details {
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.goods-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.goods-description {
  font-size: 12px;
  color: #666;
  margin-bottom: 10px;
}

.goods-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.goods-price {
  font-size: 16px;
  font-weight: bold;
  color: #f00;
}

.goods-sales {
  font-size: 12px;
  color: #aaa;
}
</style>
